<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name=viewport content="width=device-width,initial-scale=1">
		<title>消费详情</title>
		<link rel="stylesheet" href="${ctxStatic}/jiujiudevice/css/public.css" />
		<script type="text/javascript" src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js"></script>
		<style>
			table{
				width: 100%;			
				line-height: 28px;
				color: #333;
				padding-left: 15px;
				margin-top: 10px;
			}
			.title{
				font-size: 10px;
			}
			td{
				border-bottom: 1px #EEEEEE dashed;
			}
			.context{
				font-size: 12px;
				color: #999999;
			}
		</style>

	</head>

	<body style="background: #f6f6f6;">
		<div class="p-top" id="title">
			<p class="p-title" style="font-size: 16px;">${jiuDevice.companyName}</p>
			<div class="p-desc">
				<p>设备名称 ${jiuDevice.name}</p>
				<p>设备SN ${jiuDevice.sn}</p>
			</div>
		</div>
		<div class="conent">
		</div>
		
		
		<script type="text/javascript">
		Date.prototype.Format = function(fmt) { //author: meizz 
			var o = {
				"M+" : this.getMonth() + 1, //月份 
				"d+" : this.getDate(), //日 
				"h+" : this.getHours(), //小时 
				"m+" : this.getMinutes(), //分 
				"s+" : this.getSeconds(), //秒 
				"q+" : Math.floor((this.getMonth() + 3) / 3), //季度 
				"S" : this.getMilliseconds()
			//毫秒 
			};
			if (/(y+)/.test(fmt))
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
						.substr(4 - RegExp.$1.length));
			for ( var k in o)
				if (new RegExp("(" + k + ")").test(fmt))
					fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
							: (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		}
		function getLocalTime(nS) {
			var date = new Date(nS);
			return date.Format("hh:mm:ss", date);
		}
		function sysnt(){
			$.ajax({
				type:'POST',
				url : "${ctxFront}/jiujiudevice/fenduanFrontData",
				data:{
					sn:"${jiuDevice.sn}"
				},
				success:function(data){
					var useState = '';
					var json = JSON.parse(data);
					if(json.r){
						for (var i = 0; i < json.l.length; i++) {
							//八路的数据
							var dataList = json.l[i].datalist;
							useState += '<div class="p-top">';
							//遍历每组八路的数据
							
									$.each(dataList,function(index,items){
									if(index > 0){
										useState += '<div style="margin-top: 10px;">';
									}else{
										useState += '<div>';
									}
									useState += '<p class="p-title box flex-between"><span>时间 '+getLocalTime(items.createTime)+'</span><span>';
									var inkStatus = items.inkStatus;
									var snm = '';
									if (inkStatus == 0) {
										snm = '<i style="color: #00DA81;">使用';
									} else {
										snm = '<i style="color: #DC0511;">加墨';
									}
									useState += snm+'</i></span></p><div id="deviceContent">';
									
									if(inkStatus == 0){
										useState += '<table><tr class="title"><td>路线</td><td>墨盒</td><td>单价</td><td>初始重量</td><td>当前重量</td><td>使用重量</td><td>消费金额</td></tr><tr class="title"><td>（路）</td><td>（颜色）</td><td>（元/g）</td><td>(g)</td><td>(g)</td><td>(g)</td><td>(元)</td></tr>';
										//这里的datalist是8路的数据
										var inkMessage = items.datalist;
									    $.each(inkMessage,function(index,item){
									    	useState += '<tr class="context"><td>'+item.id+'<td>'+item.flag+'</td><td>'+item.price+'</td><td>'+item.preValue+'</td><td>'+item.value+'</td><td>'+item.useValue+'</td><td>'+item.useMoney+'</td></tr>';
									    });
									    useState += '</table></div></div>';
									    //墨盒数据结束
									}else{
										useState += '</div></div></div>';
									}

									if(inkStatus == 0){
									  //八路合计开始
											//八路的总计
				                            var useMoney = json.l[i].submoney;
				                           if(isNaN(useMoney)){
				                            	
				                           }else{
												useState += '<p class="p-moeny h2"><span>合计</span> <span>'+useMoney+'元</span></p></div></div>';  
				                           }
										}
								 });
								
							
							
						}
						
					}else{
						useState = '<div class="p-top" style="width:100%;height:380px;line-height:380px;font-size:15px"><div  style="text-align:center;color:#666666;vertical-align:middle;">暂时没有数据</div></div>';
					}
					$(".conent").html(useState);
				}
			})
		}
		$(function(){
			sysnt();
		});
		setInterval(sysnt, 5000);
		</script>
	</body>

</html>